<template>
  <div class="user">
    <div class="search">
      <div class="search_input">
        <el-input placeholder="请输入内容" clearable v-model="params.query">
          <template #append>
            <el-button :icon="Search" @click="initGetUserlist" />
          </template>
        </el-input>
      </div>
      <div class="search_btn">
        <el-button type="primary" @click="DialogShow({})">添加用户</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="Users"
        :border="true"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          v-for="(item, index) in options"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
          <template v-slot="{ row }" v-if="item.prop === 'mg_state'">
            <!-- v-slot="{ row }"利用插槽获取当前行的对象 -->
            <el-switch
              v-model="row.mg_state"
              v-on:change="changeState(row.id, row.mg_state)"
            />
          </template>
          <template #default="{ row }" v-else-if="item.prop === 'action'">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top"
            >
              <el-button
                type="primary"
                :icon="Edit"
                size="small"
                @click="DialogShow(row)"
              />
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                :icon="Delete"
                size="small"
                @click="DeleteUser(row)"
              />
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="分配角色"
              placement="top"
            >
              <el-button
                type="warning"
                :icon="Setting"
                size="small"
                @click="AddRole(row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageation">
      <el-pagination
        v-model:currentPage="params.pagenum"
        v-model:page-size="params.pagesize"
        :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <Adddialog
      v-model="RoleShow"
      v-if="RoleShow"
      :AuthTitle="RoleTitle"
      :RoleData="RoleData"
      @closePop="ClosePOP"
    ></Adddialog>
    <Dialog
      v-model="popShow"
      :DialogTitle="DialogTitle"
      v-if="popShow"
      @initUserlist="initGetUserlist"
      :EditData="EditData"
    />
    <!-- v-model其实就是v-bind:popShow和v-on:popShow的语法糖 -->
  </div>
</template>

<script lang="ts" setup>
import { options } from "@/utils/userTable"; //用来循环表格的列的对象
import { Delete, Edit, Search, Setting } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import apis from "@/http/apis";
import { shallowReactive, ref, reactive } from "vue";
import Dialog from "./components/dialog.vue";
import Adddialog from "./components/AddRoleDialog.vue";
import { isNull } from "@/utils/filter";

const DialogTitle = ref(""); //弹出层传入标题
const total = ref(0); //分页部分总分页数
const popShow = ref(false); //弹出层是否显示
const EditData = ref({}); //当前编辑对象

const RoleShow = ref(false); //控制角色分配对话框显示隐藏
const RoleTitle = ref(""); //分配角色传入标题
const RoleData = ref({}); //当前分配角色对象
// 接收自定义事件关闭弹窗的方法
const ClosePOP = (pop: any) => {
  RoleShow.value = pop;
  initGetUserlist(); //刷新数据
  // console.log(AuthShow.value, "弹窗关");
};
//分配角色处理函数

const AddRole = (row: any) => {
  RoleTitle.value = "分配权限";
  RoleData.value = JSON.parse(JSON.stringify(row));

  RoleShow.value = true;
};
//弹出层显示函数同时也是添加用户和编辑用户的处理函数，传入的是当前点击的数据对象row
const DialogShow = (row: any) => {
  if (isNull(row)) {
    //如果row是空值那就是添加用户操作
    DialogTitle.value = "添加用户";
    EditData.value = {}; //不传入当前对象
  } else {
    //不是空值就是编辑用户操作
    DialogTitle.value = "编辑用户";
    EditData.value = JSON.parse(JSON.stringify(row)); //将这一行的对象传到子组件弹窗中
  }
  popShow.value = true;
};
//删除处理函数
const DeleteUser = (row: any) => {
  ElMessageBox.confirm("您确定要删除当前用户吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //删除请求
      await apis.DeleteUser(row.id);
      initGetUserlist(); //刷新数据
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
//初始请求参数对象
const params = shallowReactive({
  query: "",
  pagenum: 1,
  pagesize: 2,
});
// 请求到的数据对象
let Users: Idata = ref([]);
//请求函数
const initGetUserlist = async () => {
  const userlists: any = await apis.getUserlist(params);
  Users.value = userlists.data.users;
  total.value = userlists.data.total;

  // console.log(Users.value, "---");
};
initGetUserlist();

//pageSize改变处理函数
const handleSizeChange = (pagesize: number) => {
  params.pagenum = 1; //重置页数
  params.pagesize = pagesize; //将改变后的值重新赋值
  initGetUserlist();
};
//pagenum改变处理函数
const handleCurrentChange = (pagenum: number) => {
  params.pagenum = pagenum;
  initGetUserlist();
};
//状态改变处理函数
const changeState = (uid: number, type: boolean) => {
  apis.changeUserState(uid, type);
  ElMessage({
    message: "改变用户状态成功",
    type: "success",
  });
};
</script>

<style lang="less" scoped>
.user {
  .search {
    display: flex;
    .search_input {
      width: 30%;
    }
    .search_btn {
      margin-left: 15px;
    }
  }
  .table {
    margin-top: 10px;
  }
  .pageation {
    width: 100%;
    background: #fff;
    padding: 10px 0;
  }
  .pop {
    .el-dialog {
      padding: var(--el-dialog-padding-primary);
      padding-bottom: 10px;
      margin-right: 16px;
      word-break: break-all;
    }
  }
}
</style>
